<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="/WEB-INF/jsp/taglib.jsp" %>
<html>
<head>
    <c:import url="/WEB-INF/jsp/frontend/head.jsp"/>
    <title>登录</title>
    <link rel="stylesheet" href="<spring:url value="/css/login-reg.css"/>"/>
</head>
<body>
<%--<c:import url="/WEB-INF/jsp/frontend/header.jsp"/>--%>

<div class="top-content" id="login-body">
    <div class="container">
        <div class="main-content" id="main-content">
            <div class="head">
                <a href="<spring:url value="/" /> ">
                    <img src="<spring:url value="/images/logo/logo_login.png" />"/>
                </a>
            </div>
            <div class="form-box">
                <form role="form" action method="post" class="login-form" id="loginForm">
                    <div class="form-group">
                        <label class="label" for="login-username">邮箱</label>
                        <input type="text" name="userEmail" placeholder="请输入邮箱地址" class="form-input"
                               id="login-username">
                    </div>
                    <div class="form-group">
                        <label class="label" for="login-password">密码</label>
                        <input type="password" name="userPassword" placeholder="请输入密码" class="form-input"
                               id="login-password">
                    </div>
                    <button type="submit" class="btn" id="loginBtn">登录</button>
                    <input class="btn register register-btn" value="注册" href="<spring:url value="/registerPage" />"/>
                    <div class="otherFunc">
                        <div class="autoLogin">
                            <label class="autoLogin-label">
                                <input class="autologin-checkbox" type="checkbox" name="autoLogin" value="true"/>
                                <span class="autologin-text">自动登陆</span>
                            </label>
                        </div>
                        <div class="forget-password" id="forgetPassword">忘记密码？</div>
                    </div>
                    <div class="info" id="failHint">
                        <div class="infoIcon" id="failIcon"></div>
                        <div class="infoHint" id="failHintText">
                            <p>登录错误</p>
                        </div>
                    </div>
                </form>

                <form role="form" action method="post" class="register-form" id="registerForm">
                    <div class="form-group">
                        <label class="label" for="register-username">用户名</label>
                        <input type="text" name="userName" placeholder="请输入用户名" class="form-input"
                               id="register-username" onblur="testUsername()">
                        <div class="status" id="usernameStatus"></div>
                        <p class="hint" id="usernameHint"></p>
                    </div>
                    <div class="form-group">
                        <label class="label" for="register-email">邮箱</label>
                        <input type="text" name="userEmail" placeholder="请输入邮箱地址"
                               class="form-input"
                               id="register-email" onblur="testEmail()">
                        <div class="status" id="emailStatus"></div>
                        <p class="hint" id="emailHint"></p>
                    </div>
                    <div class="form-group">
                        <label class="label" for="register-password">密码</label>
                        <input type="password" name="userPassword" placeholder="请输入密码" class="form-input"
                               id="register-password" onblur="testPassword()">
                        <div class="status" id="passwordStatus"></div>
                        <p class="hint" id="passwordHint"></p>
                    </div>
                    <div class="form-group">
                        <label class="label" for="register-passwordAgain">确认密码</label>
                        <input type="password" name="register-passwordAgain" placeholder="请确认密码"
                               class="form-input"
                               id="register-passwordAgain" onblur="testPasswordAgain()">
                        <div class="status" id="passwordAgainStatus"></div>
                        <p class="hint" id="passwordAgainHint"></p>
                    </div>
                    <button type="button" class="btn" id="registerBtn">注册</button>
                    <span class="relogin">已有账号？</span>
                </form>

                <form role="form" class="return-form" id="return-form">
                    <div class="btn" id="success">
                        <div class="ok"></div>
                        成功
                    </div>
                    <button type="button" class="btn" id="returnBtn">登录</button>

                    <div class="info" id="successHint">
                        <div class="infoIcon" id="successIcon"></div>
                        <div class="infoHint">
                            <p>我们已经向您发送了一封注册邮件，</p>
                            <p>请在邮箱中确认并激活账户</p>
                        </div>
                    </div>
                </form>

                <%--resetPassword--%>
                <form role="form" action method="post" class="reset-password-form" id="resetPasswordForm">
                    <div class="form-group">
                        <label class="label" for="register-email">邮箱</label>
                        <input type="text" name="userEmail" placeholder="请输入邮箱地址"
                               class="form-input"
                                onblur="testEmail()">
                        <div class="status" ></div>
                        <p class="hint" ></p>
                    </div>
                    <div class="form-group">
                        <label class="label" for="register-password">密码</label>
                        <input type="password" name="userPassword" placeholder="请输入新密码" class="form-input"
                                onblur="testPassword()">
                        <div class="status" ></div>
                        <p class="hint" ></p>
                    </div>
                    <button type="button" class="btn btn-success" id="resetPasswordBtn">重置密码</button>
                    <button type="button" class="btn btn-info return-login" style="margin-top: 30px;">登陆</button>

                </form>
                <div>
                    <div class="infoHint" id="resetInfo">
                        <p>我们已经向您发送了一封邮件，</p>
                        <p>请在邮箱中确认</p>
                        <button type="button" class="btn btn-info" id="resetSuccess" style="margin-top: 30px;">登陆</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<c:import url="/WEB-INF/jsp/frontend/footer.jsp"/>
<c:import url="/WEB-INF/jsp/frontend/script.jsp"/>
</body>
<script>
    window.onload = function() {
        //配置
        var config = {
            vx: 4,  //小球x轴速度,正为右，负为左
            vy: 4,  //小球y轴速度
            height: 2,  //小球高宽，其实为正方形，所以不宜太大
            width: 2,
            count: 10,      //点个数
            color: "255,255,255",  //点颜色
            stroke: "188,187,187",      //线条颜色
            dist: 1000000,    //点吸附距离
            e_dist: 20000,   //鼠标吸附加速距离
            border_radius: 20,
            max_conn: 1   //点到点最大连接数
        };

        var body = document.getElementById("login-body");

        CanvasParticle(config, body);
    };

    var entrance = "${entrance}";
    if (entrance == "loginPage") {
        $("#loginForm").show();
        $("#registerForm").hide();
    }
    else if (entrance == "registerPage") {
        $("#loginForm").hide();
        $("#registerForm").show();
    }

    //login
    var loginUrl = "<spring:url value="/login" />";
    var loginForm = $("#loginForm");
    var loginBtn = $("#loginBtn");

    loginBtn.click(function () {
        $.ajax({
            type: "POST",
//            cache: false,
//            async: false,
            url: loginUrl,
            data: loginForm.serialize(),
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    window.location.href = "/";
                } else {
                    $("#failHintText p").html(data.msg);
                    $("#failHint").slideDown("slow");
                }
            },
            error: function (data) {
                $(".hint").slideDown("slow");
            }
        });
        //This return is necessary
        return false;
    });

    //captcha
    var loginCaptchaBtn = $("#loginCaptcha");
    changeImgCaptcha(loginCaptchaBtn, true);
    loginCaptchaBtn.click(function () {
        changeImgCaptcha(loginCaptchaBtn, true);
        return false;
    });

    function changeImgCaptcha(img, refresh) {
        var url = img.data("url") + "?timestamp=" + (new Date()).getTime();
        if (refresh) {
            url += "&refresh=true";
        }
        img.attr("src", "");
        img.attr("src", url);
    }

    var userNameReg = /^\w+$/;
    var userEmailReg = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;


    //register
    var registerUrl = "<spring:url value="/register" />";
    var registerForm = $("#registerForm");
    var registerBtn = $("#registerBtn");

    function testEmail() {
        var email = document.getElementById("register-email");
        var hint = document.getElementById("emailHint");
        if (userEmailReg.test(email.value)) {
            $(email).css({"border": "2px solid #80c269"});
            $("#emailStatus").css({"background": "url('<spring:url value="/images/login-reg/right.png" />')"});
            $(hint).slideUp();
            return true;
        }
        else {
            $(email).css({"border": "2px solid #f8b551"});
            $("#emailStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
            hint.innerHTML = "邮件地址不符合规范";
            $(hint).slideDown();
            return false;
        }
    }

    function testPassword() {
        var password = document.getElementById("register-password");
        var hint = document.getElementById("passwordHint");
        if (!userNameReg.test(password.value) || password.value.length < 6 || password.value.length > 12) {
            $(password).css({"border": "2px solid #f8b551"});
            $("#passwordStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
            hint.innerHTML = "密码必须为6-12位的数字、字母或下划线";
            $(hint).slideDown();
            return false;
        }
        else {
            $(password).css({"border": "2px solid #80c269"});
            $("#passwordStatus").css({"background": "url('<spring:url value="/images/login-reg/right.png" />')"});
            $(hint).slideUp();
            return true;
        }
    }

    function testPasswordAgain() {
        var password = document.getElementById("register-password");
        var passwordAgain = document.getElementById("register-passwordAgain");
        var hint = document.getElementById("passwordAgainHint");
        if (passwordAgain.value !== password.value) {
            $(passwordAgain).css({"border": "2px solid #f8b551"});
            $("#passwordAgainStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
            hint.innerHTML = "密码与第一次输入不符";
            $(hint).slideDown();
            return false;
        }
        else if (passwordAgain.value == "") {
            $(passwordAgain).css({"border": "2px solid #f8b551"});
            $("#passwordAgainStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
            hint.innerHTML = "密码不能为空";
            $(hint).slideDown();
            return false;
        }
        else {
            $(passwordAgain).css({"border": "2px solid #80c269"});
            $("#passwordAgainStatus").css({"background": "url('<spring:url value="/images/login-reg/right.png" />')"});
            $(hint).slideUp();
            return true;
        }
    }

    function testUsername() {
        var username = document.getElementById("register-username");
        var hint = document.getElementById("usernameHint");
        if (!userNameReg.test(username.value) || username.value.length < 4 || username.value.length > 10) {
            $(username).css({"border": "2px solid #f8b551"});
            $("#usernameStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
            hint.innerHTML = "用户名必须为4-10位的数字、字母或下划线";
            $(hint).slideDown();
            return false;
        }
        else {
            $(username).css({"border": "2px solid #80c269"});
            $("#usernameStatus").css({"background": "url('<spring:url value="/images/login-reg/right.png" />')"});
            $(hint).slideUp();
            return true;
        }
    }

    $(document).ready(function () {
        $("#loginError").slideDown("slow");
        $("#loginHint p").slideDown("slow");

        $(".register").click(function () {
            $(".login-form").slideUp("slow", function () {
                $(".register-form").slideDown("slow");
            });
        });

        $(".relogin").click(function () {
            $(".register-form").slideUp("slow", function () {
                $(".login-form").slideDown("slow");
            });
        });

        registerBtn.click(function () {
            if (testEmail() && testPassword() && testPasswordAgain() && testUsername()) {
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: registerUrl,
                    data: registerForm.serialize(),
                    async: false,
                    success: function (data) {
                        console.log(data);
                        $("#commonLayout_appcreshi").parent().html(data);
                        $(".register-form").slideUp("slow", function () {
                            $(".return-form").slideDown("slow",function () {
                                $("#successHint").slideDown("slow");
                            });
                        });
                    },
                    error: function (request) {
                        alert("Connection error");
                    },
                });
            } else {
                $("#register-password").val("");
                $("#register-password").css({"border": "2px solid #f8b551"});
                $("#passwordStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
                $("#register-passwordAgain").val("");
                $("#register-passwordAgain").css({"border": "2px solid #f8b551"});
                $("#passwordAgainStatus").css({"background": "url('<spring:url value="/images/login-reg/error.png" />')"});
                var Btn = $("#registerBtn");
                Btn.animate({left: "+=15px"}, 100, function () {
                    Btn.animate({left: "-=30px"}, 200, function () {
                        Btn.animate({left: "+=22px"}, 150, function () {
                            Btn.animate({left: "-=15px"}, 100, function () {
                                Btn.animate({left: "+=8px"}, 50);
                            });
                        });
                    });
                });
            }
        });

        $("#returnBtn").click(function () {
            $(".return-form").slideUp("slow", function () {
                $(".login-form").slideDown("slow");
            })
        })
    });


    //reset password
    var forgetPassword = $("#forgetPassword");
    var resetPasswordForm = $(".reset-password-form");
    var resetPasswordBtn = $("#resetPasswordBtn");
    var resetPasswordUrl = "<spring:url value="/sendResetPasswordEmail" />";
    var returnLogin = $(".return-login");
    var resetInfo = $("#resetInfo");

    resetPasswordForm.hide();
    resetInfo.hide();

    forgetPassword.click(function () {
        $(".login-form").slideUp("slow", function () {
            resetPasswordForm.slideDown("slow");
        })
    });

    returnLogin.click(function () {
        resetPasswordForm.slideUp("slow", function () {
            $(".login-form").slideDown("slow");
        })
    });

    $("#resetSuccess").click(function () {
        resetInfo.slideUp("slow", function () {
            $(".login-form").slideDown("slow");
        })
    });

    resetPasswordBtn.click(function () {
        $.ajax({
            type: "POST",
//            cache: false,
//            async: false,
            url: resetPasswordUrl,
            data: resetPasswordForm.serialize(),
            dataType: "json",
            success: function (data) {
                if (data.success) {
                    //window.location.href = "/";
                } else {
                    //$("#failHintText p").html(data.msg);
                    //$("#failHint").slideDown("slow");
                }
            },
            error: function (data) {
                //$(".hint").slideDown("slow");
            }
        });
        resetPasswordForm.slideUp("slow", function () {
            resetInfo.slideDown("slow");
        });
        return false;
    });
</script>
</html>
